<template>
	<view class="page_box">
		<!-- 商城名 -->
		<!-- #ifndef H5 -->
		<u-sticky>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<u-sticky  :offset-top="offsetTop" @fixed="fixed">
		<!-- #endif -->
			<view>
				<!-- 手机状态栏 -->
				<view class="status_bar" :style="{background:bgColor}"></view>
				<view class="header_tit" :style="{background:bgColor}">
					YTHeart
				</view>
			</view>
		</u-sticky>
		<view class="content_box">
			<!-- 搜索框 -->
			<search :bgColor="bgColor" :disabled="true" :showAction="false"></search>
			<!-- 轮播图 -->
			<banner :bannerList="bannerList" @changeBgColor="changeBgColor"></banner>
			<!-- 公告 -->
			<u-notice-bar :list="noticeList" mode="vertical" direction="column" color="#fff" bg-color="#20cbdc" @click="openNotice"></u-notice-bar>
			<!-- 宫格菜单 -->
			<gridMenu :gridMenuList="gridMenuList" class="gridMenu"></gridMenu>
			<view class="huodong_area" v-if="hdopensta==1">
				<view class="huodong_item">
					<view class="huodong_inner" @click="clickHd(1)">
						<u-image src="/static/tabbar/hd_01.jpg" width="100%" mode="widthFix"></u-image>
					</view>
				</view>
				<view class="huodong_item">
					<view class="huodong_inner" @click="clickHd(2)">
						<u-image src="/static/tabbar/hd_02.jpg" width="100%" mode="widthFix"></u-image>
					</view>
				</view>
			</view>
<!-- 			<view class="huodong_area" v-if="hdopensta==1">
				<view class="huodong_item">
					<view class="huodong_inner" @click="clickHd(3)">
						<u-image src="/static/tabbar/hd_01.jpg" width="100%" mode="widthFix"></u-image>
					</view>
				</view>
			</view> -->
			<!-- 商品专区 -->
			<!-- <commodityArea></commodityArea> -->
			<!-- 优惠券 -->
			<!-- <coupon ref="coupon"></coupon> -->
			<!-- 拼团 -->
			<!-- <groupon :grouponList="grouponList"></groupon> -->
			<!-- 秒杀 -->
			<!-- <seckill :seckillList="seckillList"></seckill> -->
			<!-- 推荐商品 -->
			<hotGoods :hotGoodsList="hotGoodsList" :goodsStatus="goodsStatus" ref="hotGood"></hotGoods>
			<!--返回顶部-->
			<u-back-top :custom-style="customStyle" :icon-style="iconStyle" :scroll-top="scrollTop" :bottom="backbottom"></u-back-top>
			<view class="kefu" @click="kefu()">
				<text>客服</text>
			</view>
		</view>
		<u-popup v-model="show" mode="center" :closeable="true">
			<view>
				<image style="width:280px;height:350px" :src="noticeImg"></image>
			</view>
		</u-popup>
		<u-popup v-model="noticeShow" mode="center" :closeable="true" width="90%">
			<view style="padding: 60rpx">
				{{content}}
			</view>
		</u-popup>
	</view>
</template>

<script>
	import search from "@/components/public/search.vue";
	import banner from "@/components/home/banner.vue";
	import gridMenu from "@/components/home/gridMenu.vue";
	import groupon from "@/components/home/groupon.vue";
	import seckill from "@/components/home/seckill.vue";
	import hotGoods from "@/components/home/hotGoods.vue";
	import commodityArea from "@/components/home/commodityArea.vue";
	import coupon from "@/components/home/coupon.vue";
	import {bannerList,getMenu,goodsRecommendList,cartCount,indexTimeLimitedList,indexSharingList,storeInfo,edition} from "@/common/api.js";
	export default {
		components: {
			search,
			banner,
			gridMenu,
			groupon,
			seckill,
			hotGoods,
			commodityArea,
			coupon
		},
		data() {
			return {
				offsetTop:0,
				hdopensta:2,
				bgColor:"",
				customStyle:{
					backgroundColor: "#a0edf1"
				},
				iconStyle:{
					color: "#0e595d",
					fontSize:"30rpx"
				},
				bannerList: [],
				gridMenuList:[],
				grouponList:[],
				seckillList:[],
				hotGoodsList: [],
				goodsStatus: 'loadmore',
				goodsTotal:0,
				goodsSize: 10,
				goodsStart: 1,
				scrollTop: 0,
				noticeList:[],
				noticeImg:"",
				show:false,
				noticeShow:false,
				content:"",
				active_id:0,
        		backbottom:60,
			}
		},
		onLoad() {
			bannerList(this,{cid:1});
			getMenu(this,{type:2});
			storeInfo(this);
			console.log('storeInfo');
			//indexTimeLimitedList(this,{page:1,limit:1,type:1});
			//indexSharingList(this,{page:1,limit:4});
			this.hotGoodsList=[];
			this.goodsStart = 1;
			this.selectGoodsList();
			// #ifdef H5
			this.backbottom = 100;
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
				 //console.log(JSON.stringify(wgtinfo));
				 //console.log("b版本好好",wgtinfo.version);//应用版本号
				 edition(this,{code:wgtinfo.version})
			})
			// #endif
		},
		onHide() {
			//this.$refs.coupon.closeModel();
		},
		onShow() {
			cartCount(this,{})
		},
		onTabItemTap(e){
			cartCount(this,{});
			//indexTimeLimitedList(this,{page:1,limit:1,type:1});
			//indexSharingList(this,{page:1,limit:4});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.goodsStatus = 'loading';
			if(this.goodsTotal/(this.goodsStart*this.goodsSize)>1){
				this.goodsStart++;
				this.selectGoodsList();
			}else{
				this.goodsStatus = 'nomore';
			}
		},
		methods: {
			changeBgColor(val){
				this.bgColor=val;
			},
			hdSta(data){
				// console.log('hdSta2',data);
				this.hdopensta=data.hdsta;
			},
			fixed(idx){
				this.offsetTop=-90;
			},
			clickHd(tp){
				console.log('clickHdtp',tp);
				if(tp==1){
					uni.navigateTo({
						url:'/pages/views/hdlist'
					})
				}else if(tp==2){
					uni.navigateTo({
						url:'/pages/views/pinlist'
					})
				}else{
					uni.navigateTo({
						url:'/presell/preselllist'
					})
				}
			},
			selectGoodsList(){
				goodsRecommendList(this,{page:this.goodsStart,limit:this.goodsSize})
			},
			openNotice(index){
				// this.noticeShow = true
				// this.content = this.noticeList[index]
			},
			kefu(){
				if(this.active_id>0){
					uni.navigateTo({
						url:'/seckill_new/goodsDetail?active_id='+this.active_id
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/views/showhfive'
				 });
			},
			doUpData(url) {
			    uni.showLoading({
			        title: '更新中……'
			    })
				setTimeout(() => {
					uni.downloadFile({//执行下载
						url: url, //下载地址
						success: downloadResult => {//下载成功
							uni.hideLoading();
							if (downloadResult.statusCode == 200) {
								uni.showModal({
									title: '',
									content: '更新成功，确定现在重启吗？',
									confirmText: '重启',
									confirmColor: '#EE8F57',
									success: function(res) {
										if (res.confirm == true) {
											uni.setStorage({
											  key: 'launchFlag',
											  data: false
											});
											plus.runtime.install(//安装
												downloadResult.tempFilePath, {
													force: true
												},
												function(res) {
													utils.showToast('更新成功，重启中');
													plus.runtime.restart();
												}
											);
										}
									}
								});
							}
						}
					});
				}, 2000);
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.page_box {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}
	.status_bar {
		height: var(--status-bar-height);	//这里是状态栏css变量
		width: 100%;
	}
	.header_tit{
		color: #FFFFFF;
		padding: 30rpx 0 10rpx 20rpx ;
		font-size: 38rpx;
		font-weight: 500;
	}
	.content_box {
		flex: 1;
		overflow: hidden;
	}
	.gridMenu{
		background-color: #fff;
		margin: 10rpx 0;
	}
	.kefu{
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		right: 44rpx;
		bottom: 140rpx;
    // #ifdef H5
    bottom: 180rpx;
    // #endif
		border-radius: 5520px;
		z-index: 9;
		opacity: 1;
		background-color: #CAB493;
		text-align: center;
		line-height: 80rpx;
		color:#FFFFFF;
		font-size: 24rpx;
	}
	.huodong_area{margin:20rpx;min-height:0;overflow: hidden;}
	.huodong_item{width:50%;min-height: 0;overflow: hidden;float:left;}
	.huodong_inner{margin:10rpx;min-height: 0;overflow: hidden;}
</style>
